<!-- 头部 -->
<template>
  <div class="app-header">
    <el-button class="toggle" @click="sidepull" icon="el-icon-caret-left" circle size="mini"></el-button>
    <span class="breadcrumb">{{$store.state.web.breadcrumb}}</span>
    <a-tabs style="position: absolute; top: 0px; left: 60px; width: 80%; background: white; line-height: 30px;"></a-tabs>
    <div class="header_right">
      <el-popover
      placement="bottom"
      width="200"
      trigger="click">
      <div class="setting-item" @click="openAccountInfo" style="cursor: pointer">账号信息</div>
      <div class="setting-item" @click="openModifyPwd" style="cursor: pointer">修改密码</div>
      <div class="setting-item" @click="loginout" style="cursor: pointer; border-top: 1px solid #ebeef5;">退出</div>
      <img style="vertical-align: middle" slot="reference" src="../../assets/a0.jpg" alt="">
    </el-popover>
    </div>
    <!-- 修改密码 -->
    <modify-password-dialog @visibleChange="modifyPasswordDialogvisibleChange" :visible="modifyPasswordDialogVisible"></modify-password-dialog>
    <account-information-dialog @visibleChange="accountInformationDialogChange" :visible="accountInformationDialogVisible"></account-information-dialog>
  </div>
</template>

<script>
import ModifyPasswordDialog from './dialog/ModifyPasswordDialog.vue'
import AccountInformationDialog from './dialog/AccountInformationDialog.vue'
import ATabs from './Table.vue'
import { mapMutations } from 'vuex'
export default {
  components: {
    ModifyPasswordDialog,
    AccountInformationDialog,
    ATabs
  },
  data () {
    return {
      modifyPasswordDialogVisible: false,
      accountInformationDialogVisible: false
    }
  },
  methods: {
    // 退出
    loginout () {
      this.resetMenu()
      this.resetQjrole()
      this.$router.push({path: '/login'})
    },
    modifyPasswordDialogvisibleChange (value) {
      this.modifyPasswordDialogVisible = value
    },
    accountInformationDialogChange (value) {
      this.accountInformationDialogVisible = value
    },
    openAccountInfo () {
      this.accountInformationDialogVisible = true
    },
    openModifyPwd () {
      this.modifyPasswordDialogVisible = true
    },
    sidepull () {
      if (this.$store.state.web.collapse) {
        this.$store.state.web.collapse = false
      } else {
        this.$store.state.web.collapse = true
      }
    },
    ...mapMutations({
      resetMenu: 'user/resetMenu',
      resetQjrole: 'user/resetQjrole'
    })
  }
}
</script>

<style lang="less">
  .app-header{
    .breadcrumb{
      margin-left: 20px;
    }
    .toggle{
      padding: 0;
    }
    line-height: 60px;
    > * {
      vertical-align: middle;
    }
    i{
      font-size: 26px;
      color: #409EFF;
      cursor: pointer;
    }
    .header_right{
      float: right;
      height: 100%;
      border-radius: 15px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
  }
</style>
